<template>
  <view class="content">
    <view class="tap">
      <view :class="tapIndex===0?'tap-item-active':''" class="tap-item" @click="setTapIndex(0)">新手任务</view>
      <view :class="tapIndex===1?'tap-item-active':''" class="tap-item" @click="setTapIndex(1)">日常任务</view>
    </view>
    <view class="list">
      <view class="item" :class="('item'+item.id)+' '+(item.doneTask !==0 ?'item-end'+item.id:'')"
            v-for="(item,index) in list"
            :key="index" :id="'item'+item.id">
        <view class="icon">
          <image :src="item.icon"></image>
        </view>
        <view class="task-content">
          <view class="task-info">
            <view class="task-name">{{ item.taskName }}</view>
            <view class="task-message" v-if="item.id!==7">
              <image :src="image_host+(item.doneTask===0?'jifen.png':'icon_lingqu.png')"></image>
              <text v-if="item.doneTask===0 && item.reward && ![101,102].includes(item.id)">
                可获得{{ item.reward }}积分
              </text>
              <text v-if="item.doneTask===1 && item.reward && ![101,102].includes(item.id)">
                已获得{{ item.reward }}积分
              </text>
              <text v-if="!item.reward && [101,102].includes(item.id)">可获得实物奖励</text>
              <text v-if="item.reward && [101,102].includes(item.id)">
                {{ item.reward }}积分（已获得{{ item.sumIntegral }}）
              </text>
            </view>
          </view>
          <view :class="item.doneTask===1?'task-button-end':''" class="task-button" @click="clickTask(item)">
            {{ item.doneTask === 0 ? '去完成' : '已完成' }}
          </view>
        </view>
        <view class="app-message" v-if="item.id===7 && item.doneTask === 0">app登录后可获得100积分及319元羊奶粉代金劵
        </view>
        <view class="app-end" v-if="item.id===7 && item.doneTask === 1">已获得100积分及319元羊奶粉代金券
        </view>
      </view>
    </view>
    <view class="qcode-box" v-if="isQCode" @click="isQCode=false">
      <view class="qcode">
        <uqrcode class="uqrcode" ref="uqrcodes"></uqrcode>
      </view>
    </view>
    <app-drainage @submitSendMessage="submitSendMessage" ref="appDrainage"></app-drainage>
    <button-contact ref="buttonContact"></button-contact>
  </view>
</template>

<script>
import appDrainage from "@/taskCenter/components/appDrainage.vue";
import buttonContact from "@/components/buttonContact/buttonContact.vue";

export default {
  components: {
    appDrainage,
    buttonContact
  },
  data() {
    return {
      tapIndex: 0,
      isQCode: false,
      list: [],
      config: {},
      image_host: this.image_host + 'task/',
      showAppTask: true
    };
  },
  onShow() {
    this.getConfig()
  },
  onLoad(e) {
    this.showAppTask = e.showAppTask
  },
  methods: {
    setOrientation() {
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('#item7').boundingClientRect(data => {
          this.$refs.appDrainage.boxData = data
          this.$refs.appDrainage.init()
        }).exec();
      }, 500)
    },
    // 聚焦到日常任务
    initDayTask() {
      if (this.tapIndex === 0) {
        let tapIndex = 1;
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].doneTask === 0) {
            tapIndex = 0
            break
          }
        }
        this.setTapIndex(tapIndex)
      }
    },
    async getConfig() {
      let res = await this.$javaCircle.doRequest("get", "vs/newbie/taskList", '', '', true)
      if (res.data.code === 0) {
        this.config = res.data.data
        this.list = this.tapIndex === 0 ? this.config.newbieTaskList : this.config.dailyTaskList
        this.initDayTask()
        if (this.showAppTask == 'false') {
          this.setOrientation()
        }
      }
    },
    setTapIndex(index) {
      this.tapIndex = index
      this.list = index === 0 ? this.config.newbieTaskList : this.config.dailyTaskList
    },
    submitSendMessage() {
      this.$javaCircle.doRequest("post", "vs/newbie/taskRead", '', 'json', true)
      this.showAppTask = true
    },
    clickTask(item) {
      if (item.doneTask === 1) {
        return
      }
      let taskUrl = {
        1: {type: 'url', url: '/pages/circle/circleOfFriends/sendFriends/sendFriends', urlType: 0},
        2: {type: 'url', url: '/pages/circle/index', urlType: 1},
        3: {type: 'url', url: '/pages/circle/index', urlType: 1},
        4: {type: 'code', url: ''},
        5: {type: 'url', url: '/pages/physiqueTest/index?source=1', urlType: 0},
        6: {type: 'url', url: '/pages/sindex/index', urlType: 1},
        7: {type: 'button-contact', url: ''},
        100: {type: 'url', url: '/pages/circle/index', urlType: 1},
        101: {type: 'code', url: ''},
        102: {type: 'url', url: '/pages/newMember/newMember', urlType: 0},
      }
      let taskItem = taskUrl[item.id]
      if (taskItem.type === 'url') {
        uni.setStorageSync('taskId', item.id)
        if (taskItem.urlType === 0) {
          uni.navigateTo({
            url: taskItem.url
          })
        } else if (taskItem.urlType === 1) {
          if (taskItem.url === '/pages/sindex/index') {
            getApp().globalData.isFromTaskCenter = true;
          }
          uni.switchTab({
            url: taskItem.url
          })
        }
      } else if (taskItem.type === 'code') {
        this.showQCode(item.id)
      } else if (taskItem.type === 'button-contact') {
        this.$refs.buttonContact.show = true
      }
    },
    async showQCode(id) {
      let res = await this.$javaCircle.doRequest("post", "vs/shopCheckIn/myQRCode", {taskId: id}, 'json', true)
      if (res.data.code !== 0) {
        uni.showToast({title: res.data.message, icon: "none"})
        return
      }
      uni.showLoading({title: '生成中...'})
      this.isQCode = true
      this.$nextTick(() => {
        this.$refs.uqrcodes.make({
          mode: 'view', // 默认为view
          size: 300,
          text: res.data.data
        }).then(res => {
          uni.hideLoading()
          console.log(res)
        })
      })
    }
  },
}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 15upx 24upx;
}

.tap {
  width: 100%;
  height: 88upx;
  display: flex;
  align-items: center;
  border-radius: 5upx;
  border: 2upx solid #54B174;

  .tap-item {
    width: 50%;
    height: 100%;
    line-height: 88upx;
    text-align: center;
    color: #666666;
    font-size: 38upx;
    transition: all .2s linear;
  }

  .tap-item-active {
    background-color: #54B174;
    border-radius: 5upx;
    color: #fff;
  }
}

.list {
  flex: 1;
  overflow: auto;

  .item {
    width: 100%;
    height: 168upx;
    display: flex;
    align-items: center;

    .icon {
      width: 100upx;
      height: 100upx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }

      margin-right: 18upx;
    }

    .task-content {
      height: 168upx;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2upx solid #D1D1D1;

      .task-name {
        font-size: 40upx;
        color: #333333;
        font-weight: 600;
      }

      .task-message {
        font-size: 34upx;
        color: #F5A623;
        display: flex;
        align-items: center;
        margin-top: 6upx;

        image {
          width: 32upx;
          height: 32upx;
          margin-right: 8upx;
        }
      }

      .task-button {
        width: 172upx;
        height: 64upx;
        background: linear-gradient(142deg, #28D771 0%, #16B14B 100%);
        font-size: 34upx;
        color: #FFFFFF;
        line-height: 64upx;
        text-align: center;
        border-radius: 36upx;
      }

      .task-button-end {
        background: #B6E1C5;
      }
    }
  }
}

.qcode-box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);

  .qcode {
    width: 330px;
    height: 330px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20upx;
  }
}

.item7 {
  background-color: #F9F9F9;
  flex-wrap: wrap;
  height: auto !important;
  border-radius: 20upx;
  overflow: hidden;
  margin-top: 20upx;

  .task-content {
    height: auto;
    border: none;
  }

  .icon {
    border-radius: 5upx !important;
    margin-top: 20upx;
    margin-left: 20upx;
  }

  .task-button {
    border-radius: 8upx;
    background: linear-gradient(180deg, #FFBC10 0%, #F7941C 100%);
    color: #fff;
    margin-top: 20upx !important;
    margin-right: 20upx !important;
  }

  .app-message {
    width: 100%;
    background-color: #EBEBEB;
    box-sizing: border-box;
    padding: 13upx;
    font-size: 34upx;
    color: #F33F02;
    margin-top: 12upx;
  }
}

.item-end7 {
  .task-button {
    background: #F9F9F9 !important;
    color: #CCCCCC !important;
    border: 1upx solid #CCCCCC !important;
    box-sizing: border-box;
    margin-top: -20upx !important;
  }

  .task-button-end {
    background-color: #F9F9F9;
  }

  .task-content {
    border-bottom: none !important;
  }
}

.app-end {
  width: 100%;
  box-sizing: border-box;
  padding-left: 140upx;
  font-size: 32upx;
  color: #666666;
  margin-top: -54upx;
}
</style>
